<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <div class="buyContent">
                <div class="buy_flex">
                    <div class="left_price">
                        <p class="jxkc">{{ buyItem.name }}--课程列表</p>
                        <div class="ydy">一对一指导</div>
                    </div>
                    <div class="right_price">
                        <div class="price">
                            <p class="" style="display: flex;align-items: center;"><span
                                    style="font-size: 13px;color: #f20d0d;;">优惠价</span><span class="item">￥{{
                                        buyItem.price }}</span>
                            </p>
                            <div class="kf">添加客服微信</div>
                        </div>
                        <div class="buy_content">
                            <div class="buy" @click="addCart">加入购物车</div>
                            <div class="addCart" @click="payLesson">立即购买</div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="lesson_index">
                <div class="swiper-div">



                    <div class="jiaoliu">

                        <div class="list">

                            <div class="course-group course-group1" v-for="(item, u) in dataList" @click="jump(item)"
                                :key="u">

                                <div class="left">
                                    <img :src="item.courseImgUrl" alt="" />
                                </div>
                                <div class="right">

                                    <div class="content">
                                        <div>

                                            <span class="item">{{ item.courseName }}</span>
                                            <div class="isbuy">主讲人:王月武</div>
                                            <p class="isbuy">时长:{{ item.duration }}</p>
                                        </div>



                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

import {
    courseList,
    lessoncartAdd,


} from '@/api/index'

export default {
    computed: {
        currentPath() {
            return '/lesson'; // 获取当前路由路径
        },
    },
    data() {
        return {
            courseType: "",
            courseTypeName: '',
            categoryList: [],
            buyItem: {},
            dataList: [],
            mylessonTotal: 0,
            courseTypeOne: [],
            swiperList: [

            ],
            total: 0,
            list: [
                { sid: 0, src: '自定义src0', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 1, src: '自定义src1', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 2, src: '自定义src2', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 3, src: '自定义src3', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" }
            ]
        }
    },
    methods: {

        toSwiper(item) {
            if (item.bannerTypeId == 1) {
                uni.navigateTo({
                    url: "/pages/lesson/list?id=" + item.dataId + '&img=' + item.coverImage
                })
            } else {
                uni.navigateTo({
                    url: "/pages/shop/shopDetails?id=" + item.dataId
                })
            }
            console.log(item)
        },
        addCart() {
            let data = {
                spuName: this.courseTypeName + '_' + this.buyItem.name,
                spuId: this.buyItem.id,
                addPrice: this.buyItem.price,
                picUrl: this.buyItem.image,
                quantity: 1
            }
            console.log(data)
            lessoncartAdd(data).then((res) => {
                if (res.code == 200) {
                    this.$confirm('加入购物车成功', '提示', {
                        confirmButtonText: '去购物车',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push({
                            name: "goodsCart"
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }
            })


        },

        jump(item) {
            this.$router.push({
                name: "video",
                query: {
                    buyItem: JSON.stringify(item),
                    courseItem: JSON.stringify(this.buyItem)
                }
            })

        },
        getListTypeLeft() {
            courseList({
                courseCategory: this.buyItem.id,

            }).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    console.log(res)
                    this.dataList = res.rows;
                    this.total = res.total;
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
            })
        },
        payLesson() {

            let data = {
                name: this.courseTypeName + '_' + this.buyItem.name,
                spuId: this.buyItem.id,
                price: this.buyItem.price,
                courseImgUrl: this.buyItem.image,
                quantity: 1,
                descs: this.buyItem.descs

            }
            this.$router.push({
                name: "payOrder",
                query: {
                    dataObj: JSON.stringify(data),
                    type: 'order'
                }
            })
        },


        getcourseTypeName(id) {

            this.courseTypeOne.forEach((v) => {

                if (id == v.dictValue) {
                    this.courseTypeName = v.dictLabel;
                }
            })

        },
    },
    mounted() {
        console.log(this.$route.query.buyItem); // 输出: value1
        this.buyItem = JSON.parse(this.$route.query.buyItem)
        this.getListTypeLeft()
        this.courseTypeOne = JSON.parse(localStorage.getItem('courseType'))
        console.log(this.courseTypeOne, "000")
        this.getcourseTypeName(this.buyItem.courseType)

    }
}
</script>

<style lang="scss" scoped>
.buyContent {

    height: 90px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(28, 31, 33, .06), 0 4px 8px 0 rgba(28, 31, 33, .06), 0 8px 16px 0 rgba(28, 31, 33, .06), 0 12px 24px 0 rgba(28, 31, 33, .06), 0 16px 32px 0 rgba(28, 31, 33, .06);
    border-radius: 16px;
    margin-bottom: 18px;
    position: fixed;
    top: 210px;
    width: 1300px;
    display: flex;
    align-items: center;

    .buy_flex {
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        width: 100%;
        display: flex;

        .left_price {
            text-align: center;

            .jxkc {
                font-size: 24px;
                font-weight: 800;
                color: #e6c9a1;
                line-height: 31px;
            }

            .ydy {
                font-size: 14px;
                color: #000;
                margin-top: 10px;


            }
        }

        .right_price {
            justify-content: center;
            display: flex;
            align-items: center;

            .price {
                .item {
                    color: #f20d0d;
                    font-weight: 700;
                    font-size: 26px;
                }

                .kf {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                    text-align: center;
                    cursor: pointer;
                    width: 120px;
                    height: 30px;
                    line-height: 30px;


                    color: #000;
                    border-radius: 10px;
                }
            }

            .buy_content {
                display: flex;
                justify-content: center;
                align-items: center;

                .buy {
                    width: 110px;
                    height: 46px;
                    text-align: center;
                    line-height: 46px;
                    font-size: 16px;
                    margin-left: 15px;
                    border: 1px solid #d4bc98;
                    border-radius: 24px 0 0 24px;
                    color: #91512b;
                    font-weight: 600;
                    cursor: pointer;
                }

                .addCart {
                    width: 110px;
                    height: 48px;
                    text-align: center;
                    line-height: 48px;
                    cursor: pointer;

                    font-size: 16px;

                    font-weight: 700;
                    cursor: pointer;
                    margin-left: 15px;
                    position: relative;
                    border-radius: 0 24px 24px 0;
                    background: #91512b;
                    color: #fff;
                    margin-left: 0;
                }
            }
        }
    }
}

.lesson_index {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

    .swiper-div {

        .swiper {
            width: 100%;
            height: 350upx;

            image {
                width: 100%;
                height: 350upx;
            }
        }

        .keep-out {
            width: 100%;
            height: 30upx;
            border-radius: 100% 100% 0 0;
            background-color: #ff570a;
            margin-top: -15upx;
            position: absolute;
        }
    }

    .jiaoliu {
        width: 100%;
        background-color: #f5f5f5;
        margin: auto;
        margin-top: 110px;

        .lesson_title {
            font-size: 17px;
            font-weight: 800;
            padding: 10px 0;
            display: inline-block;
            background: #fff;
        }

        .list {

            display: flex;
            flex-wrap: wrap;


            .course-group {
                display: flex;
                background: #fff;
                margin-top: 10px;

                border-bottom: 1px solid #f9eded;
                width: 19.5%;
                box-shadow: 0 4px 8px 0 rgba(95, 101, 105, .05);
                border-radius: 8px;
                margin-left: 10px;


                .left {

                    width: 98%;

                    img {
                        width: 100%;
                        height: 80px;
                    }
                }

                .right {
                    width: 70%;

                    .first {
                        font-size: 30upx;
                        font-weight: 800;
                        padding-top: 5px;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                    }

                    .content {


                        .item {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            color: #545c63;
                            line-height: 20px;
                            max-height: 40px;
                            margin-bottom: 8px;
                            padding: 0 8px;
                        }

                        .isbuy {
                            font-size: 15px;
                            color: #9199a1;
                            line-height: 18px;
                            padding: 0 8px;


                        }

                        .price {
                            display: flex;
                            align-items: center;
                            margin-left: 7px;
                            margin-top: 6px;

                            .left_price {
                                font-size: 12px;

                                line-height: 18px;
                                padding: 5px;
                                color: #fff;
                                background-color: rgba(242, 13, 13, .6);
                                border-radius: 5px;
                            }

                            .price_item {
                                font-size: 18px;
                                color: #ff8342;
                                line-height: 18px;
                                padding: 0 8px;
                            }
                        }

                        .cishu {
                            margin-top: 10px;
                        }

                        text {
                            font-size: 28px;
                            color: #ab9a9a;
                        }
                    }
                }


            }

            .course-group1 {
                display: flex;
                flex-direction: column;
                padding: 10px;


                border-bottom: none;

                .left {

                    width: 98%;
                    margin: 2px;

                    img {
                        width: 100%;
                        height: 180px;
                    }
                }

                .right {
                    width: 97%;
                    margin: auto;

                    .first {
                        font-size: 17px;
                    }

                    .content {
                        .item {
                            font-size: 14px;
                        }
                    }

                }
            }
        }
    }


}
</style>